/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    BlobInputList, CCell, Cell, InputLine, RCell, Select, Table, TableBody, TableRow, Text, TextArea,
} from "customize-easy-ui-component";
import {CCellUnit, InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {TailMenRowIspCheck} from "../../contain/rarelyVary";
import {Each_ZdSetting, tabIBlistCb, tabIDateCb, useTableEditor} from "../../hook/useRepTableEditor";
import {copyZdConfig, useElasticTable} from "../../../hooks/useElasticTable";
import {useThreeColumnView} from "../../hook/useThreeColumnSubr";

import {config设备概况} from "./orcBase";

const config合于=[['管段编号(起止点)','n',220,tabIBlistCb(['区段一',],2)], ['管道外损伤综合评价等级','C',65],
        ['下次全面检验日期','x',85,tabIDateCb()],['允许工作压力，MPa','P',90],['允许工作温度，℃','T',70],['允许介质','j',50],
        ['其他','o',50], ['情况描述','m',300,tabIBlistCb([],2)] ] as Each_ZdSetting[];
const config合于Vw=copyZdConfig(config合于,[320,95,100,90,80,80,80,390]);
export const itemA合于表: string[] = ['合于表', '合于备注'];
//起止位置 : 在资料审查中有2个字段， 可是‘资料审查’也不是必选的录入页啊，关联？[['起始位置', '起始位'],  [['终止位置', '终止位'],
export const FitnessServiceTbl =
React.forwardRef((
    {children, show, alone = true, refWidth, label, }: InternalItemProps, ref
) => {
    const {inp, setInp} = useItemInputControl({ref});
    const [getInpFilter] = useMeasureInpFilter(null, itemA合于表,);
    const headview=<Text variant="h5">
      测试结果表：
    </Text>;
    const [render合于表]=useTableEditor({inp, setInp,  headview,
        config: config合于, table: '合于表',  maxRf:2 });
    return (
    <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                         alone={alone} label={label!}>
        <Text variant="h5">{label}：</Text>
        {render合于表}
        <Text variant="h5">备注：</Text>
        <TextArea  value={inp?.合于备注 ||''} rows={6}
                   onChange={e => setInp({ ...inp, 合于备注: e.currentTarget.value||undefined}) } />
        {children}
    </InspectRecordLayout>
    );
});
/*pdf：公用管道合于使用评价结论报告续页（一）：原版本的表格颠倒垂直布局字段的。这里尝试1大行改成2小行的拆分组合形式布局。
评价结论的第二部分 续页（一）；
* */
export const FitnessServiceTblVw= ({orc, rep,op} :{orc:any, rep:any,op?:boolean}
) => {
    const [render阴保表]=useElasticTable({content: orc?.合于表, config: config合于Vw, slash:true,});
    return <>
        <div css={{"@media print": {paddingBottom: '6rem', pageBreakInside: 'avoid'}}}>
            <Text id='CathodicProtect' variant="h2" css={{
                textAlign: 'center', marginTop: '1rem',
            }}>公用管道合于使用评价结论报告续页（一）</Text>
            <div css={{display: 'flex', justifyContent: 'space-between'}}>
                <Text></Text>
                <Text>{op ? '记录' : '报告'}编号：{rep.isp.no}</Text>
            </div>
        </div>
        <div css={{"@media print": {marginTop: '-6rem'}}}>
            <RepLink rep={rep} tag={'FitnessServiceTbl'}>
                {render阴保表}
            </RepLink>
        </div>
        <Table fixed={["15%", "%"]} css={{borderCollapse: 'collapse'}} tight miniw={800}>
            <TableBody>
                <RepLink rep={rep} tag={'FitnessServiceTbl'}>
                    <TableRow>
                        <Cell colSpan={2}>
                            <div css={{minHeight: '1rem', whiteSpace: 'pre-wrap'}}>
                                备注：<br/>
                                {orc.合于备注 ?? '／'}</div>
                        </Cell>
                    </TableRow>
                </RepLink>
            </TableBody>
        </Table>
        <TailMenRowIspCheck orc={orc} rep={rep}
                            href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}/>
    </>;
};


export const itemA合于使=['合于结论','评价人员','合于问处'];
/**合于使用评价
 * */
export const FitnessService=
React.forwardRef((
    { children, show ,alone=true,redId,nestMd,label,}:InternalItemProps,  ref
) => {
    const [getInpFilter]=useMeasureInpFilter(null,itemA合于使,);
    const {inp, setInp} = useItemInputControl({ ref });
    return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                nestMd={nestMd} alone={alone} label={label!}>
        <Text variant="h5">{label}：</Text>
        发现问题及处理意见:
        <BlobInputList  value={inp?.合于问处 ||''} rows={12} datalist={['详见“公用管道合于使用评价结论报告续页（二）”。']}
                        onListChange={v => setInp({ ...inp, 合于问处: v || undefined}) } />
        <InputLine label='评价人员：'>
            <BlobInputList value={inp?.评价人员 || ''} rows={2}
                           onListChange={v => setInp({...inp, 评价人员: v || undefined}) } />
        </InputLine>
        <Text variant="h5">合于使用评价结论{'>>'}</Text>
        <InputLine  label='评价结论' >
            <Select inputSize="md" css={{minWidth: '140px', fontSize: '1.3rem', padding: '0 1rem'}}
                    value={inp?.合于结论 || ''}
                    onChange={e => setInp({...inp, 合于结论: e.currentTarget.value || undefined})}>
                <option></option>
                <option>允许使用</option>
                <option>不允许使用</option>
            </Select>
        </InputLine>
    </InspectRecordLayout>;
});

//hook报错 {mapFxian.get('公用管道合于使用评价结论报告')?.do &&  检验结论报告({theme, orc, rep})}
//直接改成  ?.do &&  <FitnessServiceVw orc={orc} rep={rep}/> 就不报错了。
export const FitnessServiceVw = ({orc, rep}: { orc: any, rep: any }
) => {
    const [firstNode,secNode]=useThreeColumnView({orc, config:config设备概况,slash:true,split:[6],
        embedCol: [undefined, <CCell rowSpan={4}>性能参数</CCell>]
    });
    return <>
        <Text id={'FitnessService'} variant="h2" css={{textAlign: 'center', "@media print": {pageBreakBefore: 'always',},
        }}>公用管道合于使用评价结论报告</Text>
        <Text css={{
            display: 'flex', flexDirection: 'row-reverse', marginRight: '2rem'
        }}>报告编号：{rep.isp?.no}</Text>
        <Table fixed={ ["14.1%","14%", "23%","12.2%","15%", "%"]  } css={{borderCollapse: 'collapse'}} tight miniw={800}>
            <TableBody>
                <RepLink rep={rep} tag={'Survey'}>
                    {firstNode}
                </RepLink>
            </TableBody>
        </Table>
        <Table fixed={ ["4%","10%", "28%", "9%", "9%", "%"] } css={{borderCollapse: 'collapse'}} tight miniw={800}>
            <TableBody>
                <RepLink rep={rep} tag={'Survey'}>
                    {secNode}
                </RepLink>
            </TableBody>
        </Table>
        <Table fixed={ ["8.5%","36%", "8.5%", "6.5%", "%"] } css={{borderCollapse: 'collapse'}} tight miniw={800}>
            <TableBody>
                <RepLink rep={rep} tag={'FitnessService'}>
                    <TableRow>
                        <CCell>主要依据</CCell><CCell colSpan={4}>TSG D7004-2010《压力管道定期检验规则——公用管道》</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>发现问题及处理意见</CCell>
                        <Cell colSpan={4} css={{whiteSpace:'pre-wrap'}}>
                            {orc.合于问处 ?? '／'}
                        </Cell>
                    </TableRow>
                    <TableRow>
                        <CCell rowSpan={4}>检验结论</CCell><CCell rowSpan={4}><Text variant="h1" css={{fontSize:'1.6rem'}}>{orc.合于结论}</Text></CCell>
                        <CCell rowSpan={4}>许用参数（报废依据）</CCell><CCell>压力：</CCell><CCellUnit unit='MPa'>{orc.许压力 ?? '／'}</CCellUnit>
                    </TableRow>
                    <TableRow><CCell>温度：</CCell><CCellUnit unit='℃'>{orc.许温度 ?? '／'}</CCellUnit></TableRow>
                    <TableRow><CCell>介质：</CCell><CCell>{orc.许介质 ?? '／'}</CCell></TableRow>
                    <TableRow><CCell>其它：</CCell><CCell>{orc.许其它 ?? '／'}</CCell></TableRow>
                    <TableRow>
                        <RCell colSpan={2}> 下次全面检验日期：</RCell>
                        <CCell colSpan={3}>{orc.新下检日 ?? '／'}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>评价人员</CCell>
                        <CCell colSpan={4}>{orc.评价人员}</CCell>
                    </TableRow>
                </RepLink>
            </TableBody>
        </Table>
    </>;
};
